본문으로 건너뛰기

안전한 Raw HTML 사용법

Raw HTML이란?​

웹 개발을 하다 보면 특정 상황에서 HTML을 그대로 렌더링해야 하는 경우가 있습니다. 이를 Raw HTML이라고 합니다. React에서 Raw HTML을 사용하는 방법과 그에 따른 주의사항을 알아보겠습니다.

Raw HTML 사용 방법​

React에서는 dangerouslySetInnerHTML 속성을 사용하여 Raw HTML을 렌더링할 수 있습니다. 다음은 간단한 예제입니다.

import React from 'react';

const RawHtmlExample = () => {
  const rawHtml = "<h1>안녕하세요!</h1><p>이 HTML은 Raw HTML로 렌더링됩니다.</p>";

  return (
    <div dangerouslySetInnerHTML={{ __html: rawHtml }} />
  );
};

export default RawHtmlExample;

이 예제에서 dangerouslySetInnerHTML은 HTML을 직접 넣어주는 React의 속성입니다. 하지만, 사용 시 주의가 필요합니다.

주의사항​

1. XSS(Cross-Site Scripting) 공격​

Raw HTML을 사용할 때 가장 주의해야 할 점은 XSS(Cross-Site Scripting) 공격입니다. 외부에서 입력된 HTML을 그대로 렌더링하면, 악성 스크립트가 포함될 수 있습니다. 이를 방지하려면 신뢰할 수 없는 데이터는 반드시 서버 측에서 검증하고, 필요시 HTML을 이스케이프 처리해야 합니다.

2. HTML 이스케이프​

React는 기본적으로 JSX에서 HTML을 이스케이프 처리합니다. 예를 들어, <div>에 <script> 태그를 그대로 넣어도 실제로는 문자열로 처리되어 안전합니다. 그러나 dangerouslySetInnerHTML을 사용하면 이 보호장치가 해제되므로 더욱 신중하게 데이터를 다뤄야 합니다.

3. 사용자 입력 데이터 처리​

사용자 입력 데이터를 Raw HTML로 렌더링할 때는 반드시 필터링을 거쳐야 합니다. 예를 들어, DOMPurify와 같은 라이브러리를 사용하면 HTML을 안전하게 정화할 수 있습니다.

import DOMPurify from 'dompurify';

const rawHtml = "<h1>안녕하세요!</h1><p>이 HTML은 Raw HTML로 렌더링됩니다.</p>";
const cleanHtml = DOMPurify.sanitize(rawHtml);

Raw HTML 사용 사례​

Raw HTML은 주로 다음과 같은 경우에 사용됩니다:

  • 서버에서 받아온 HTML 콘텐츠를 렌더링할 때
  • WYSIWYG 에디터에서 생성된 HTML을 렌더링할 때
  • 외부 라이브러리나 플러그인에서 제공하는 HTML을 사용할 때

더 알아보기​

  • XSS(Cross-Site Scripting): 웹 보안 공격 기법 중 하나로, 악성 스크립트를 주입하는 방법입니다.
  • HTML 이스케이프: HTML 특수 문자를 엔티티로 변환하여 보안과 렌더링 문제를 방지하는 방법입니다.
  • DOMPurify: 사용자 입력으로부터 HTML을 정화하는 자바스크립트 라이브러리입니다.

내용 요약과 다음 주제​

이번 주제에서는 React에서 Raw HTML을 안전하게 사용하는 방법과 주의사항에 대해 설명했습니다. Raw HTML 사용 시에는 XSS 공격에 주의하고, 사용자 입력 데이터를 필터링해야 합니다. 다음 주제인 동적 렌더링과 조건부 렌더링에서는 데이터에 따라 조건부로 컴포넌트를 렌더링하는 방법을 알아보겠습니다.